<template>
  <div id="mapContainer"></div>
</template>

<script>
	import QRCode from 'qrcodejs2'

export default {

  beforeRouteEnter(to, from, next) {
    return next((vm) => {});
  },

  name: "CsmMap",

  data() {
    return {
      mapCenter:{
        lat:26.655302,
        lng:106.633387
      }
    };
  },

  mounted: function(){
      this.initMap();
  },

  methods: {

    //初始化地图
    initMap: function(){
      let center = new TMap.LatLng(this.mapCenter.lat, this.mapCenter.lng);
      
      let map = new TMap.Map(document.getElementById("mapContainer"), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
        rotation: 45  //设置地图旋转角度
      });

      //弹出内容
      let info = [];
      info.push("<div class='mapInfoWindow'>");
      info.push("<div class='title'>");
      info.push("<div class='name'>XXX洗浴中心</div>");
      info.push("<div class='type'>办公场所</div>");
      info.push("</div>");
      info.push("<div class='address'><img src='/image/ico01.png'/>贵州省贵阳市观山湖区黔灵山路德福中心</div>");
      // info.push("<div class='qr'><img src='/image/temp/temp01.png'/></div>");
      info.push("<div class='qr' id='qrCode'></div>");
      info.push("<div class='qrInfo'><span class='green'>• 启用中</span> NO:202203123821</div>");
      info.push("</div>");

      //设置弹出窗
      var infoWindowLocation = new TMap.LatLng(this.mapCenter.lat, this.mapCenter.lng);
      //创建InfoWindow实例，并进行初始化
      var infoWindow = new TMap.InfoWindow({
          map: map,
          position: infoWindowLocation,
          //设置infoWindow，content支持直接传入html代码，以实现各类内容格式需求
          content: info.join("")
      });
      this.createQrCode(this.detail.csmCode)
    },
    	createQrCode(url) {
        var qrcode = new QRCode(document.getElementById("qrCode"), {
            text: url, // 需要转换为二维码的内容
            width: 100,
            height: 100,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
        console.log('qrcode', qrcode);
    	}
    
  },
};
</script>

<style>

  .mapInfoWindow{
    padding-bottom: 10px;
    min-width: 300px;
  }

  .mapInfoWindow > .title{
    display: flex;
    justify-content: space-between;
  }

  .mapInfoWindow > .title > .name{
    font-weight: bold;
  }

  .mapInfoWindow > .title > .type{
    color: #5d8aff;
    font-size: 0.8rem;
    background-color: #edf2ff;
    padding:5px;
    border-radius: 3px;
  }

  .mapInfoWindow > .address{
    font-size: 0.8rem;
    margin-top: 5px;
    color: #979fb9;
    border-bottom: solid 1px #e6e6e6;
    padding-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .mapInfoWindow > .address > img{
    width: 20px;
    height: auto;
    display: block;
  }

  .mapInfoWindow > .qr{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }

  .mapInfoWindow > .qr > img{
    width: 120px;
    height: auto;
    display: block;
    border: solid 5px #a5efb9;
  }

  .mapInfoWindow > .qrInfo{
    margin: 20px auto 0px auto;
    font-size: 0.9rem;
    background-color: #fafafa;
    width: fit-content;
    padding: 5px 20px 5px 20px;
    border-radius: 10px;
  }

  .mapInfoWindow > .qrInfo > .green{
    color: #33e378;
  }

</style>